<template>
    <div class="box">
        <el-container class="container">
            <el-header class="header">
                <div>Persi后台管理系统</div>
                <div style="display:flex">
                    <p style="margin-right:30px;color:blue">{{ username }}</p>
                    <div @click="loginout" style="cursor: pointer;">退出登录</div>
                </div>
            </el-header>
            <el-container>
                <el-aside class="aside" width="200px">
                    <!-- menu菜单 -->
                    <el-menu :default-active="$route.path" router>
                        <!-- 一级菜单 -->
                        <el-menu-item index="/user">
                            <el-icon>
                                <Lock />
                            </el-icon>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="/role">
                            <el-icon>
                                <ChatRound />
                            </el-icon>
                            <span>角色管理</span>
                        </el-menu-item>
                        <el-sub-menu index="/menu">
                            <template #title>
                                <el-icon>
                                    <location />
                                </el-icon>
                                菜单管理
                            </template>
                            <el-menu-item index="/menu">
                                <el-icon>
                                    <Lock />
                                </el-icon>
                                菜单管理
                            </el-menu-item>
                            <el-menu-item index="/other">
                                <el-icon>
                                    <Folder />
                                </el-icon>
                                其他页面
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default {
    // 组合式API
    setup() {
        const router = useRouter()
        const username = localStorage.getItem('username')
        // 退出登录
        const loginout = () => {
            // 提示退出登录成功
            ElMessage({
                message: '退出登录成功',
                type: 'success',
            })
            // 移除用户信息
            localStorage.removeItem('username')
            // 移除token
            localStorage.removeItem('token')
            // 跳转到登录页面 -- 选项式API  this.$router.push('/login')
            router.push('/login')
        }
        return {
            username,
            loginout
        }
    }
}
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body,
html,
#app,
.box {
    width: 100%;
    height: 100%;
}

.box {
    background: #efefef;

    .container {
        height: 100%;

        .header {
            background: #fff;
            display: flex;
            justify-content: space-between;
            line-height: 60px
        }

        .aside {
            background: #fff
        }
    }
}
</style>